<template>
	<div style="width: 100%; height: 100%; border: green 1px solid">
		<div style="display: flex; justify-content: space-between;">
			<h2 style="text-align: center;">修改/添加</h2>
			<h2><button @click="go2show()">返回原本位置</button></h2>
		</div>
		<hr>
		编号：<input type="text" v-model="stu.uid" readonly="readonly" /><br>
		名字：<input type="text" v-model="stu.uname" /><br>
		账号：<input type="text" v-model="stu.phone" /><br>
		密码：<input type="text" v-model="stu.pwd" /><br>
		教室：<select v-model="stu.clz.clzno">
			<option v-for="x in clzs" :value="x.clzno" :key="x.clzno">{{ x.clzname }}</option>
		</select><br>
		图片：<input type="file" ref="img" /><br>
		<div style="width: 10vw; height: 10vw">
			<img :src="$ip + `/api/public/showimg/${stu.pic}`" style="width: 100%; height: 100%" />
		</div>
		<button @click="addup()">添加/修改</button>
		<p>{{ doadd }}</p>
	</div>
</template>

<script>
export default {
	data() {
		return {// 初始化数据
			stu: { uid: 0, uname: '', phone: '', pwd: '', clz: { clzno: 0 } },// 初始化学生对象
			clzs: [],// 初始化班级数组
			token: "",
			doadd: ''// 添加或修改结果
		};
	},
	methods: {
		addup() {
			// 判断输入数据是否为空
			if (!this.stu.uname || !this.stu.phone || !this.stu.pwd || !this.stu.clz.clzno) {
				alert("添加不允许为空");
				return;
			}

			let path =
				this.stu.uid === 0 ? `${this.$ip}/api/adm/stu/add` : `${this.$ip}/api/adm/stu/update`;

			const fd = new FormData();// 创建 FormData 对象通过对象发送数据
			fd.append("uid", this.stu.uid);
			fd.append("uname", this.stu.uname);
			fd.append("phone", this.stu.phone);
			fd.append("pwd", this.stu.pwd);
			fd.append("clz.clzno", this.stu.clz.clzno);

			const filex = this.$refs.img.files[0];// 获取上传文件
			if (filex) {
				fd.append("mypic", filex);
			}

			this.$axios.post(path, fd, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.doadd = resp.data.msg;
					console.log(resp.data);
					this.$router.push("/adm/stushow");
				})
				.catch((error) => {
					console.error('添加/修改学生:', error);
					alert('添加/修改学生失败');
				});
		},
		go2show() {// 返回原本位置
			this.$router.push("/adm/stushow");
		}
	},
	mounted() {// 在页面加载时执行
		this.token = window.localStorage.getItem("token");// 获取token
		const studentId = parseInt(this.$route.query.id, 10);// 获取路由参数

		if (studentId > 0) {
			//如果路由参数大于0，则根据路由参数获取学生数据，
			// 否则创建一个空的学生对象
			this.fetchStudent(studentId);// 调用fetchStudent方法
		} else {
			this.stu = { uid: 0, uname: '', phone: '', pwd: '', clz: { clzno: 0 } };
		}

		this.fetchClassrooms();
	},
	methods: {
		fetchStudent(id) {// 根据id获取学生数据
			this.$axios.get(`${this.$ip}/api/adm/stu/findById/${id}`, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.stu = resp.data.data;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error('获取学生信息:', error);
					alert('获取学生信息失败');
				});
		},
		fetchClassrooms() {// 获取教室数据
			this.$axios.get(`${this.$ip}/api/public/getClzs`)
				.then((resp) => {
					this.clzs = resp.data.data;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error('获取教室信息:', error);
					alert('获取教室信息失败');
				});
		}
	}
};
</script>

<style></style>